<template>
    <div class="videoPage">
        <div class="box" v-loading="loading" :class="{'getCenter':videoData.length==0}">
            <div class="list-box" v-for="i in videoData" :key="i.id" @click="getDetail(i)">
                <div class="item">
                    <div class="play" style="position: relative">
<!--                        <video width="230"  height="146" :src="$downloadUrl+i.fileUrls"-->
<!--                                id="upVideo" >-->
<!--                        </video>-->
<!--                        先写死了-->
                        <video width="228"  height="148" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
                               id="upVideo" >
                        </video>

<!--                        <div style="position: absolute;right:10px;bottom: 8px;-->
<!--                        font-size: 12px;-->
<!--                        line-height: 20px;-->
<!--                        height: 20px;-->
<!--                        padding-left: 5px;-->
<!--                        padding-right: 5px;-->
<!--                        background: rgba(203, 203, 203, .5);-->
<!--                        border-radius: 6px;color: #fff">{{i.timeLength}}</div>-->
                    </div>
<!--                    <div class="title">{{i.name}}</div>-->
                    <div class="intro">
                        {{i.name}}端午节插画练习端午节插画练习端午节插画练习端午节
                    </div>
                </div>

            </div>
            <el-empty description="暂无数据" v-if="total===0" :image="require('@/assets/images/empty.png')"></el-empty>
            <div class="pageBox">
                <div style="text-align: right;" class="page">
                    <el-pagination
                            hide-on-single-page
                            @current-change="currentChange"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            layout=" prev, pager, next"
                            :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>

        <el-dialog
                :visible.sync="dialogVisible"
                width="635px"
                :before-close="handleClose">
            <video-play :video-url="url" ></video-play>
        </el-dialog>
    </div>
</template>

<script>
    import videoPlay from '../../components/videoPlay'
    import { videoList } from '../../api/study'
    import { mapState } from 'vuex'
  export default {
    name: 'videoPage',
    components:{videoPlay},
    created () {
        // this.onload()
        let obj ={
            studentId:this.$store.state.user.userInfo.id,
            pageSize:this.pageSize,
            pageNum:this.currentPage,
            classId:this.$store.state.user.userInfo.classId,
            classOutlineId:-1
        }
        videoList(obj).then(res=>{
            console.log(res)
            if (res.code ===200){
                this.loading = false
                // this.videoData = res.rows
                this.total = res.total
            }
        })
    },
    computed:{
      ...mapState({
        current:state=>state.currentNode.id
      })
    },
    watch:{
      current(){
        this.onLoad()
      }
    },
    data(){
      return{
        url:'',
        loading:true,
        dialogVisible:false,
        videoData: [{id:1},{id:2},{id:3},{id:4}],
        currentPage:1,
        pageSize:9,
        total:0,
      }
    },
    methods:{
      onLoad(){
        let obj ={
          studentId:this.$store.state.user.userInfo.id,
          pageSize:this.pageSize,
          pageNum:this.currentPage,
          classId:this.$store.state.user.userInfo.classId,
          classOutlineId:this.current
        }
        videoList(obj).then(res=>{
          if (res.code ===200){
            this.loading = false
            // this.videoData = res.rows
            this.total = res.total
          }
        })
      },
      handleClose(){
        this.dialogVisible = false
          this.url=''
      },
      getDetail(data){
          console.log(data)
        this.dialogVisible = true
        // this.url =this.$downloadUrl+ data.fileUrls
        this.url ='http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
      },
      currentChange(val){
        console.log(val)
        this.onLoad()
      },
    }
  }
</script>

<style scoped lang="less">
    .getCenter{
        justify-content: center !important;
    }
    /deep/ .el-dialog__header{
        padding: 0 0 10px 0;
    }

    .videoPage{
        /deep/ .el-dialog{
            min-height: 10px;
        }
        .box{
            width: 770px;
            justify-content: left;
            min-height: 680px;
            /*background: #ffffff;*/
            margin: 10px;
            display: flex;
            flex-wrap:wrap;

            >.list-box{
                margin-left: 20px;
                margin-top: 20px ;
            }
            .item{
                width: 230px;
                margin-bottom: 20px;
                background: white;
                border-radius: 20px;

                .intro{
                    text-align: left;
                    padding: 10px;
                    background: white;
                    /*height: 50px;*/
                    border: 1px solid white;
                    border-radius: 6px;
                    font-size: 14px;
                    line-height: 20px;
                    color: rgba(48, 48, 48, 1);
                    overflow : hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
                .play{
                    width: 230px;
                    /*height: 148px;*/
                    border: 1px solid #999;
                    border-radius: 6px;
                    background: black;

                }
                .title{
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #666666;
                    margin-top: 8px;
                    text-align: left;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                }
            }
            .pageBox{
                width: 770px;
                margin-top: 40px;
                position: relative;
                .page{
                    position: absolute;
                    right: 10px;
                    bottom: 10px;
                    border: 1px solid #E8E8E8;
                    width: auto;
                }
                ::v-deep.el-pagination{
                    .el-pager{
                        .number{
                            color: #999999;
                        }
                        .active{
                            color: #39A5EF;
                        }
                        .more{
                            color: #999999;
                        }
                    }
                }
            }
        }
        ::v-deep .el-empty {
            height: 380px;
        }
    }

</style>
